<!-- author: xuett -->
<!-- date: 2025-05-23 18:08:42 -->
<!-- description: 获取mac地址 -->
<template>
  <div class="container">
    <!-- useragent="MyCustomUserAgent/1.0" -->
    <webview
      class="webview-box"
      partition="persist:webview-session"
      :src="url"
      :webpreferences="webPreferences"
    ></webview>
    <el-button class="operate-btn" type="primary" @click="getMacAddress">mac</el-button>
    <el-drawer v-model="drawerShow" title="获取mac地址" @close="closeDrawer">
      <div class="mac-list">
        <div class="mac-item" v-for="mac in macList" :key="mac.mac">
          <div class="mac-name">name: {{ mac.name }}</div>
          <div class="mac-address">mac:{{ mac.mac }}</div>
          <div class="mac-family">family: {{ mac.family }}</div>
          <div class="mac-address">address: {{ mac.address }}</div>
        </div>
      </div>
      <img :src="captchaUrl" alt="" />
    </el-drawer>
  </div>
</template>

<script setup>
import systemApi from '@/api/system'
// import webviewPreload from '@/utils/preload'

const webPreferences = {
  nodeIntegration: true, // 允许 Node.js 集成
  contextIsolation: false, // 允许访问 Electron API
  webSecurity: true // 禁用同源策略（仅开发环境）
}

const captchaUrl = ref('')

const state = reactive({
  url: '',
  macList: [],
  drawerShow: false
})
const { url, macList, drawerShow } = toRefs(state)

//校验mac地址符合...
state.url = 'https://app.yaoud.cn/#/'

onMounted(() => {
  const webview = document.querySelector('webview')

  webview.addEventListener('dom-ready', () => {
    // 打开 <webview> 的 DevTools
    // webview.openDevTools()
    //在webview内增加style
    webview.insertCSS(`
      .appScanLogin {
        display: none !important;
      }
      .loginType{
        display: none !important;
      }
      // .pageFoot{
      //   display: none !important;
      // }
    `)
    // 获取并操作webview内的元素
    webview.executeJavaScript(`
      document.querySelector('.pageFoot').innerHTML = '';
    `)
  })
})

const getMacAddress = () => {
  state.drawerShow = true
  window.api.getMacAddress().then((macAddress) => {
    let arr = macAddress.filter((iface) => {
      // 简单过滤虚拟网卡（根据命名约定）
      const isVirtual =
        iface.name.includes('Virtual') ||
        iface.name.includes('vEthernet') ||
        iface.name.includes('VMware')
      return !isVirtual
    })
    // 优先返回有IPv4地址且不是内部的接口
    state.macList = arr.filter(
      (iface) => iface.family === 'IPv4' && !iface.address.startsWith('169.254')
    )
    systemApi.getCaptcha().then((res) => {
      captchaUrl.value = 'data:image/gif;base64,' + res.img
    })
  })
}

const closeDrawer = () => {
  state.drawerShow = false
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .webview-box {
    width: 100%;
    height: 100%;
  }
  .operate-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
  .mac-list {
    .mac-item {
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 15px;
    }
  }
}
</style>
